<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <div>
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <br>

      <div v-for="(item, index) in optionList" :key="index">
        <el-card class="box-card">
          <div class="title">({{ index + 1 }}) Q: {{ item.subTitle }}</div>
          <div class="ansers">
            <div :class="[{ active: subItem.isCorrectAnswer }]" v-for="(subItem, subIndex) in item.optionList" :key="subIndex">
              {{ subItem.option }}： {{ subItem.value }}
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { authorQuestionDetail } from "@/api/getData";

export default {
  data() {
    return {
      optionList: []
    }
  },
  activated() {
    this._authorQuestionDetail()
  },
  methods: {
    async _authorQuestionDetail() {
      console.log(this.$route.query.userAnswerSettingId)
      const { data, code, msg } = await authorQuestionDetail({ ...this.$route.query })
      if (code !== 0) {
        this.$message.error(msg);
      }

      this.optionList = data
    }
  },
  components: {
    headTop
  },
};
</script>

<style lang="less" scoped>
@import "../style/mixin";
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
  .tip {
    color: #F56C6C;
    font-size: 12px;
  }
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-input {
    width: 180px;
  }
  .box-card {
    margin-bottom: 10px;
    .title {
      margin-bottom: 10px;
    }
    .ansers {
      color: #666;
      .active {
        color: #409EFF;
      }
    }
  }
</style>
